<script lang="ts" setup>
import { ref } from "vue"
const active = ref(0);
interface TabBar {
    fixed?: boolean;
    border?: boolean;
    zIndex?: number;
    activeColor?: string;
    inactiveColor?: string;
    route?: boolean;
    transparent?: boolean;
    safeAreaInsetBottom?: boolean;
}

interface Tab {
    name?: string;
    icon?: string;
    badge?: string | number;
    dot?: boolean;
    transparent?: boolean;
    url?: string | null;
    to?: string | null;
    replace?: boolean;
}

interface Props {
    tabBar?: TabBar;
    tabList?: Tab[];
}

const props = withDefaults(defineProps<Props>(), {
    tabBar: () => ({
        fixed: true,
        border: true,
        zIndex: 1,
        activeColor: "#1989fa",
        inactiveColor: "#7d7e80",
        route: false,
        transparent: false,
        safeAreaInsetBottom: true
    }),
    tabList: () => [
        {
            name: "标签1",
            icon: "wap-home-o",
            badge: "3",
            dot: true,
            transparent: false,
            url: null,
            to: null,
            replace: false,
        }
    ]
});
const emits = defineEmits({
    /**
     * 获取事件对象
     * @param event 事件对象
     */
    'LongPressTabbar': (el: MouseEvent | TouchEvent, tab, index: number) => {
        return { el, tab, index };
    },
    /**
     * 切换标签时触发
     * @param active 当前选中标签的名称或索引值
     */
    'changTabbar': (active: number) => {
        return active;
    }
})

/**
 * 获取事件对象
 * @param event 事件对象
 */
const LongPressTabbar = (el: MouseEvent | TouchEvent, tab: any, index: number) => {
    emits('LongPressTabbar', el, tab, index)
    console.log(index);

    btnClickStates.value[index] = !btnClickStates.value[index]
}

const btnClickStates = ref(props.tabList.map(() => false));
const btnReplaceStates = ref(props.tabList.map((tab) => tab.replace ?? false));
const btnIndex = ref(props.tabList.map((tab, index) => index));

/**
 * 切换标签时触发
 * @param active 当前选中标签的名称或索引值
 */
const change = (active: number) => {
    emits('changTabbar', active)
}
const btnClick = (e: number) => {
    console.log(e);

}
const onCloseOverlays = (index: number) => {
    btnClickStates.value[index] = false
}
</script>

<template>
    <van-tabbar v-model="active" @change="change" :active-color="tabBar.activeColor"
        :inactive-color="tabBar.inactiveColor" :fixed="tabBar.fixed" :border="tabBar.border" :z-index="tabBar.zIndex"
        :route="tabBar.route" :translate="tabBar.transparent" :safe-area-inset-bottom="tabBar.safeAreaInsetBottom">
        <van-tabbar-item
            v-menu-directive="{ isReplace: btnReplaceStates[index], onBtnClick: btnClick, show: btnClickStates[index], onCloseOverlay: onCloseOverlays, index: btnIndex[index] }"
            v-longpress="{ callback: ((el) => LongPressTabbar(el, tab, index)), pressType: 'circle', duration: 1000 }"
            v-for="(tab, index) in tabList" :key="index" :icon="tab.icon" :url="tab.url" :to="tab.to"
            :replace="tab.replace" :badge="tab.badge" :dot="tab.dot">
            {{ tab.name + index }}
        </van-tabbar-item>
    </van-tabbar>
</template>

<style lang="scss" scoped></style>
